<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东 - 逛好店</title>
    <link rel="stylesheet" href="lab3-4.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="jd-container">
        <div class="jd-header">
            <div class="logo">京东</div>
            <div class="search-bar">
                <input type="text" placeholder="搜索店铺">
                <button><i class="fas fa-search"></i></button>
            </div>
        </div>
        
        <div class="good-shops">
            <div class="section-title">
                <h2>逛好店</h2>
                <a href="#" class="more">查看更多 <i class="fas fa-angle-right"></i></a>
            </div>
            
            <div class="shop-categories">
                <button class="category-btn active">全部</button>
                <button class="category-btn">数码家电</button>
                <button class="category-btn">服装鞋帽</button>
                <button class="category-btn">美妆个护</button>
                <button class="category-btn">家居生活</button>
                <button class="category-btn">食品饮料</button>
                <button class="category-btn">母婴玩具</button>
                <button class="category-btn">运动户外</button>
            </div>
            
            <div class="shops-list">
                <div class="shop-card">
                    <div class="shop-img">
                        <img src="https://picsum.photos/400/250?random=1" alt="电子产品店铺">
                    </div>
                    <div class="shop-info">
                        <div class="shop-name">科技先锋官方旗舰店</div>
                        <div class="shop-rating">
                            <span class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></span>
                            <span class="score">4.8</span>
                            <span class="sales">月销 1.2万+</span>
                        </div>
                        <div class="shop-tags">
                            <span class="tag official">官方旗舰店</span>
                            <span class="tag">数码</span>
                            <span class="tag">新品</span>
                        </div>
                        <div class="shop-promotion">
                            <span class="coupon">满1000减100</span>
                        </div>
                    </div>
                    <button class="follow-btn">关注店铺</button>
                </div>
                
                <div class="shop-card">
                    <div class="shop-img">
                        <img src="https://picsum.photos/400/250?random=2" alt="服装店铺">
                    </div>
                    <div class="shop-info">
                        <div class="shop-name">时尚衣橱品牌店</div>
                        <div class="shop-rating">
                            <span class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></span>
                            <span class="score">4.0</span>
                            <span class="sales">月销 8000+</span>
                        </div>
                        <div class="shop-tags">
                            <span class="tag self-run">京东自营</span>
                            <span class="tag">服饰</span>
                            <span class="tag">热卖</span>
                        </div>
                        <div class="shop-promotion">
                            <span class="coupon">满200减50</span>
                        </div>
                    </div>
                    <button class="follow-btn">关注店铺</button>
                </div>
                
                <div class="shop-card">
                    <div class="shop-img">
                        <img src="https://picsum.photos/400/250?random=3" alt="美妆店铺">
                    </div>
                    <div class="shop-info">
                        <div class="shop-name">美丽时光美妆店</div>
                        <div class="shop-rating">
                            <span class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></span>
                            <span class="score">5.0</span>
                            <span class="sales">月销 2.5万+</span>
                        </div>
                        <div class="shop-tags">
                            <span class="tag official">官方旗舰店</span>
                            <span class="tag">美妆</span>
                            <span class="tag">品牌</span>
                        </div>
                        <div class="shop-promotion">
                            <span class="coupon">第二件半价</span>
                        </div>
                    </div>
                    <button class="follow-btn followed">已关注</button>
                </div>
                
                <div class="shop-card">
                    <div class="shop-img">
                        <img src="https://picsum.photos/400/250?random=4" alt="家居店铺">
                    </div>
                    <div class="shop-info">
                        <div class="shop-name">温馨家居生活馆</div>
                        <div class="shop-rating">
                            <span class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></span>
                            <span class="score">4.2</span>
                            <span class="sales">月销 6000+</span>
                        </div>
                        <div class="shop-tags">
                            <span class="tag">家居</span>
                            <span class="tag">特惠</span>
                        </div>
                        <div class="shop-promotion">
                            <span class="coupon">满300减80</span>
                        </div>
                    </div>
                    <button class="follow-btn">关注店铺</button>
                </div>
            </div>
            
            <div class="load-more">
                <button>加载更多店铺</button>
            </div>
        </div>
    </div>

    <script>
        // 简单的交互功能
        document.addEventListener('DOMContentLoaded', function() {
            // 分类按钮切换
            const categoryBtns = document.querySelectorAll('.category-btn');
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    categoryBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 关注按钮切换
            const followBtns = document.querySelectorAll('.follow-btn');
            followBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    if (this.classList.contains('followed')) {
                        this.classList.remove('followed');
                        this.textContent = '关注店铺';
                    } else {
                        this.classList.add('followed');
                        this.textContent = '已关注';
                    }
                });
            });
        });
    </script>
</body>
</html>
    